<!--
 * @Author: xuxu12138 1718324422@qq.com
 * @Date: 2024-01-18 08:17:37
 * @LastEditors: xuxu12138 1718324422@qq.com
 * @LastEditTime: 2024-03-26 13:05:11
 * @FilePath: /things-admin/src/view/commentManagement/CommentManagement.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div class="header">
      <span>用户昵称：</span>
      <Space size="large" wrap>
        <Input
          v-model.trim="nickname"
          style="width: 200px; margin-right: 20px"
          placeholder="用户昵称"
        />
      </Space>
      <span>显示状态：</span>
      <Select
        v-model="deletedata"
        style="width: 200px; margin-right: 20px"
        placeholder="审核状态"
      >
        <Option
          v-for="item in deleteArr"
          :value="item.value"
          :key="item.value"
          >{{ item.label }}</Option
        >
      </Select>
      <span>类型：</span>
      <Select
        v-model="type"
        style="width: 200px; margin-right: 20px"
        placeholder="类型"
      >
        <Option v-for="item in typeArr" :value="item.value" :key="item.value">{{
          item.label
        }}</Option>
      </Select>
      <DatePicker
        style="width: 200px; margin-right: 20px"
        type="daterange"
        placeholder="评论时间"
        @on-change="changeDate"
        format="yyyy-MM-dd"
        model-value="yyyy-MM-dd"
        v-model="date"
      ></DatePicker>

      <Button
        type="primary"
        icon="ios-search"
        style="margin: 0 10px"
        @click="searchData"
        size="default"
        >搜索
      </Button>
      <Button icon="md-refresh" style="margin-right: 10px" size="default" @click="resetData"
        >重置</Button
      >
    </div>
    <div class="body">
      <Table border :columns="columns" :data="data" :max-height="600">
        <template slot-scope="{  }" slot="content">
          <p class="content">{{ $route.query.title }}</p>
        </template>
        <template slot-scope="{ row }" slot="type">
          <p class="content">{{ row.type == 0 ? "回复" : "评论" }}</p>
        </template>
        <template slot-scope="{ row }" slot="delete">
          <p class="content">{{ row.deleted == 0 ? "显示" : "不显示" }}</p>
        </template>
        <template #action="{ row}">
          <Button type="primary" size="small" @click="enterEdit(row.id,row.commentStatus)"
            >编辑</Button
          >
          <Button type="error" size="small" style="margin-right: 5px" @click="deleteid(row.id)" v-show="!row.deleted"
            >删除</Button
          >
        </template>
      </Table>
      <div style="display: flex;justify-content: space-between;margin-top: 20px;">
      <div></div>
      <Page :total="total"   @on-change="changeSizeValue" @on-page-size-change="changePageSize" show-sizer/>
    </div>
    </div>
    <Modal
        v-model="modal"
        title="提示"
        @on-ok="ok"
        @on-cancel="cancel">
        <p>确定要删除该条数据吗？</p>
    </Modal>
  </div>
</template>

<script>
import { findByMomentId , deletecomments1} from "@/base/api/Moments";
export default {
  data() {
    return {
      date: ['',''],
      data: [],
      type: "",
      modal:false,
      deleteId:'',
      total:'',
      nickname:'',
      deletedata: "",
      total:"",
      typeArr: [
        {
          value: 0,
          label: "回复",
        },
        {
          value: 1,
          label: "评论",
        },
      ],
      deleteArr: [
        {
          value: 0,
          label: "显示",
        },
        {
          value: 1,
          label: "不显示",
        },
      ],
      pageSize: 10,
      pageIndex: 1,
      columns: [
        {
          title: "标题",
          slot: "content",
        },
        {
          title: "作者",
          key: "nickname",
        },
        // {
        //   title: "手机号码",
        //   slot: "phone",
        // },
        {
          title: "内容",
          key: "content",
        },
        {
          title: "类型",
          slot: "type",
        },
        {
          title: "显示状态",
          slot: "delete",
        },
        {
          title: "评论时间",
          key: "created",
        },
        {
          title: "操作",
          slot: "action",
          width: 220,
          align: "left",
          fixed: "right",
        },
      ],
    };
  },
  methods: {
    changeDate(data) {
      this.date = data;
    },
    changeSizeValue(data) {
        this.pageIndex = data;
        this.getTableData()
    },
    changePageSize(data) {
      this.pageIndex = 1;
      this.pageSize = data;
      this.getTableData()
    },
    searchData() {
      this.getTableData()
    },
    enterEdit(id,commentStatus) {
      this.$router.push({
        path: "/commentmanagement/edit",
        query: {
          id,
          momentId: this.$route.query.momentId,
          title: this.$route.query.title,
          commentStatus
        },
      });
    },
    resetData(){
      this.date = ['','']
      this.deletedata = ''
      this.nickname = ''
      this.type= ''
      console.log( this.nickname ,
      this.type)
      this.getTableData()
    },
    getTableData() {
      let params = {
        pageSize: this.pageSize,
        pageIndex: this.pageIndex,
        momentId: this.$route.query.momentId,
        createBegin: this.date[0] || '',
        createEnd: this.date[1] || '',
        deleted: this.deletedata== undefined ? ''  : this.deletedata,
        nickname:this.nickname== undefined ? ''  : this.nickname,
        type: this.type == undefined ? '' :this.type 
      };
      findByMomentId(params).then((res) => {
        this.data = res.data.items;
        console.log(this.data);
        this.total = res.data.itemCount;
      });
    },
     // 删除评论
  deleteid(id) {
    this.modal = true
    this.deleteId = id;
  },
  // 确定删除
  ok() {
    deletecomments1(this.deleteId).then(res=>{
      this.$message.success('删除成功')
      this.getTableData()
    })
  },
  },
  mounted() {
    this.getTableData();
  },
};
</script>

<style lang="less" scoped>
.header {
  height: 66px;
  //   width: 500px;
  background-color: #f8f8f8;
  display: flex;
  align-items: center;
  padding: 0 15px;
  margin-bottom: 20px;
}
.content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
